<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
    <link rel="stylesheet" href="../haladata/index.css">
    <link rel="stylesheet" href="../haladata/font_3426886_e4mlx2feo2t/iconfont.css">
    <link rel="stylesheet" href="../haladata/img/icof1/iconfont.css">
    <link rel="stylesheet" href="../haladata/img/iconf2/iconfont.css">

    <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            /*页面加载完成发送ajax请求*/
            $.ajax({
                url: "/thesis/all",
                type: "GET",
                dataType: 'json',
                success: function (result) {
                    if (result.code === "1"){
                        /*拼html字符串*/
                        var htmlStr = ""
                        var list = result.returnData;
                        $.each(list, function (index, obj) {
                            htmlStr += '<div class="contenttop2">' +
                                '<h2><a href="../haladata/content.html?id='+ obj.id +'" target="_blank">'+ obj.title +'</a></h2>' +
                                '<a class="ziti" href="https://www.baidu.com/s?wd='+ obj.authors +'" target="_blank">' +
                                obj.authors +
                                '</a>' +
                                '<span>  '+ obj.publishedTime +'</span>' +
                                '<a href="../haladata/content.html?id='+ obj.id +'" target="_blank">' +
                                '    <p style="font-size: 15px;">' +
                                obj.digest +
                                '    </p>' +
                                '</a>' +
                                '<span class="border">有PDF</span>' +
                                '<span>'+ obj.citeNumber +'被引用</span><span>·</span><span>'+ obj.collectNumber +'收藏</span><span>·</span><span>'+ obj.noteNumber +'笔记</span>' +
                                '<hr color="#E8E8EE">' +
                                '</div>'
                        })
                        $("#content").html(htmlStr);
                    }
                }
            })
        })
    </script>
</head>

<body>
    <div class="back">

    </div>
    <div class="suspension">
        <div class="su-left">
            <img src="../haladata/img/3.jpg" alt="">
        </div>
        <div class="su-right">
            <div class="small-top">

                <div class="top-main">
                    <span class="iconfont icon-weixin"></span>
                    <span>微信登录</span>
                </div>
                <div class="top-main">
                    <span class="iconfont icon-youxiang"></span>
                    <span>邮箱登录</span>
                </div>
                <div class="top-main">
                    <span class="iconfont icon-shouji"></span>
                    <span>手机登录</span>
                </div>
                <div class="top-main">
                    <span class="iconfont icon-suoding"></span>
                    <span>账号登录</span>
                </div>
            </div>
            <div class="small-main">
                <form action="/login" method="post">
                    <h2>账号密码登录</h2>
                    <input type="text" placeholder="请输入账号" class="main-input" name="username" id="username">
                    <br>
                    <input type="text" placeholder="请输入密码" class="main-input" name="password" id="password">
                    <input type="submit" value="登录" class="main-input" onclick="login()">
                    <div class="main-one">
                        <span>新用户请用其他方式登录</span>
                        <div class="main-one-small">
                            <input type="checkbox" name="pass-jizhu" class="input-one">
                            <label  name="pass-jizhu">记住密码</label>
                        </div>
                    </div>

                </form>
            </div>
            <div class="small-bottom">
                <span>继续即代表您同意并遵守</span>
                <span>Readpaper&nbsp;<span class="bottom-span"><a href="">用户协议</a></span>&nbsp;和&nbsp;<span class="bottom-span"><a href="">隐私协议</a></span></span>
            </div>
        </div>
    </div>
    <div class="quxiao">
<a href=""><span class="iconfont icon-quxiao"></span></a>
    </div>
    <div class="bgc">
        <div class="right"></div>
        <div class="wrapper">
            <div class="header">
                <!-- <img src="./1.png" alt=""> -->
                <img src="../haladata/img/1.png" alt="" class="img1">
                <span>HalaDatab</span>
                <img src="../haladata/img/3.png" alt="" class="img2">
                <a href="#" class="a1">登录/注册</a>
                <a href="#" class="a2">新手指引</a>
                <!-- <img src="" alt=""> -->
                <!-- <img src="" alt=""> -->
                <a href="#"><img src="../haladata/img/1.png" alt="" class="img3"></a>
            </div>
            <div class="body">

                <img src="../haladata/img/4.png" alt="" class="img4">
                <span>HalaDatab</span>
                <div class="img5">
                    <h2>专业的客家学术社区</h2>
                    <span>论文搜索</span>
                    <span class="img5 dian">·</span>
                    <span>学术讨论</span>
                </div>
                <div class="search"><input type="text" placeholder="请输入你想了解的论文" class="input1">
                    <div class="in"><a href="#">搜索</a></div>
                </div>

            </div>
            <div class="bottom">
                <div class="one"><a href="#">我的学习</a><span>Learning</span></div>
                <div class="two"><a href="#">官方活动</a><span>Activities</span></div>
                <div class="three"><a href="#">客户端下载</a><span>Download</span></div>
                <div class="four"><a href="#">新手指引</a><span>Guide</span></div>
            </div>
        </div>
    </div>

    <div class="wrapper1">
        <div class="wrapper2">
            <ul>
                <li><span class="iconfont icon-remen"></span><a href="#">为你推荐</a></li>
                <li><span class="iconfont icon-shixinwujiaoxing"></span><a href="#">热门论文</a></li>
                <li><span class="iconfont icon-wujiaoxing-mianxing"></span><a href="#">推荐论文集</a></li>
                <!-- ! -->

            </ul>
            <hr class="bianxian">
            <!--<hr color="#E8E8EE">-->
        </div>
        <div id="content">

        </div>

    </div>
</body>
<script>
    const divs = document.querySelectorAll(".wrapper1>div");
    // console.log(divs.style.display);
    window.addEventListener("scroll", roll);
    function roll() {
        let height = document.documentElement.clientHeight
        let scroll = document.documentElement.scrollTop
        divs.forEach((div) => {
            // console.log(div.style.animation);
            if (div.offsetParent.offsetTop + div.offsetTop < height + scroll) {
                // console.log(div);
                // console.log(height + scroll);
                // console.log(div.offsetParent.offsetTop);
                setTimeout(() =>
                    (dominance()), 200)
                function dominance() {
                    div.style.animation = "run 1.5s ease-in-out 1";
                    div.style.opacity = 1;
                }
            }
        })
    }
    const sign = document.querySelector(".wrapper .header .a1");
    const back = document.querySelector(".back");
    const suspen = document.querySelector(".suspension");
    const suright=document.querySelector(".suspension .su-right")
    console.log(suright);

    const bodys = document.getElementsByTagName("body")[0];
    const quxiao=document.querySelector(".quxiao");
    sign.addEventListener("click", suspension);
    quxiao.addEventListener("click", quxiaos);
    function suspension() {

        var tops = back.offsetTop / screenTop;
        console.log(tops);
        back.style.display = "block";
        suspen.style.display = "flex";
        quxiao.style.display="block";
        back.style.top = tops + "%";
        suspen.style.top = tops + "15%";
        bodys.style.overflow = "hidden";
        console.log(bodys.style.width);
        // bodys.style.animation = "run-one 0.75s ease-in-out 1";
        setTimeout(()=>(times()),750)
        function times()
        {
            suright.style.display="block"
        }
    }
    function quxiaos(){
        back.style.display = "none";
        suspen.style.display = "none";
        quxiao.style.display="none";
    }
const as=document.querySelectorAll(".wrapper1 .ziti a");
console.log(as);
as.forEach(function(a)
{
    a.addEventListener("click",add)
    function add()
    {
        const text=a.innerText;
        document.cookie="username="+text;",SameSite=None; Secure  path=author/author.html";
    }
})

    function login()
    {
        var username=$("#username").val()
        console.log(username+"$$$$$$$$$$$$$$$");
        var password=$("#password").val()
        console.log(password+"$$$$$$$$$$$$$$$");
        $.ajax(
            {
                type:"POST",
                url:"/login",
                data:
                    {
                        "username":username,
                        "password":password
                    },
                success:function(resule)
                {

                    if(resule.code==10000)
                    {
                        location.href="/loginto";
                    }
                    else if(resule.code==10004){
                        location.href="/adds.html";
                    } else
                    {
                        alert("密码或者账号错误！")
                    }
                }

            })
    }
    // linear infinite
</script>



</html>
